<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        vue生命周期的三个大阶段
        1.初始化阶段
          beforeCreate()  vm实例只完成了事件和生命周期函数的初始化
          created()       vm实例中已经初始化完成了  data  el  等属性
          beforeMount()   vm实例已经完成了绑定容器的模板的编译 但是并未实现替换
          mounted()      vm实例已经完成了模板的替换
        2.运行阶段
           beforeUpdate()   在页面数据没有重新渲染之前执行
           updated()        在页面数据重新渲染之后执行
        3.销毁阶段
         beforeDestroy()
         destroyed()       vm实例已经卸载了数据的监听和和事件
-->

<div id="app">
    <h1 id="msg">{{info}}</h1>
    <input type="text" v-model="info">
</div>

<script type="text/javascript">

    const vm = new Vue({
        el: '#app',
        data: {
            info: 'vue的生命周期演示'
        },
        methods: {},
        beforeCreate() {
            console.log("=================beforeCreate===================")
            console.log("info=" + this.info)
        },
        created() {  // 可以发送异步请求的最早的位置
            console.log("=================created===================")
            console.log("info=" + this.info)
        },
        beforeMount() {
            console.log("=================beforeMount===================")
            let msg = document.getElementById("msg").innerText;
            console.log("msg=" + msg)
        },
        mounted() {
            console.log("=================mounted===================")
            let msg = document.getElementById("msg").innerText;
            console.log("msg=" + msg)
        },
        beforeUpdate() {
            console.log("================beforeUpdate===================")
            let msg = document.getElementById("msg").innerText;
            console.log("msg=" + msg)
        },
        updated() {
            console.log("================updated===================")
            let msg = document.getElementById("msg").innerText;
            console.log("msg=" + msg)
        },
        beforeDestroy() {
            console.log("================beforeDestroy()===================")
        },
        destroyed() {
            console.log("================destroyed()===================")
        }
    })
</script>

</body>
</html>
